<template>
    <div class="list">
        <myhead title="电商"  > </myhead>
        <div class="list-box">
            <div class="list-box-left">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="全部商品"  />
                    <van-sidebar-item v-for="(l,i) in goodTypes" :key="i" :title="l.text"  />

                </van-sidebar>
            </div>
            <div class="list-box-right">
                <gList v-if="activeKey==0" :list="goodList"></gList>
                <gList v-else :list="goodList.filter(item=>item.type.value==goodTypes[activeKey-1].value)"></gList>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            activeKey:0,
        }
    },
    watch:{
        activeKey(v){
            console.log(v)
        }
    },
    mounted(){
        if(!this.goodList.length>0){
            this.$ajax.getGoodList()
            .then(res=>{
                this.changegoodList(res.data)
            })
        }

        // 异步  
        if(this.userinfo){
             this.$ajax.getCartInfo({
                phone:this.userinfo.phone,
            })
            .then(res=>{
                this.changeCartList(res.data)
            })
        }
       
    }
}
</script>

<style lang="scss" >
.list{
    width:100%;
    height:100%;
    .list-box{
        display: flex;
        width:100%;
        height:100%;
        &-left{
            // width:120px;
            height:100%;
            background: #fff;
            .van-sidebar{
                height:100%;
                .van-sidebar-item--select{
                    color:#ff5f16;
                }
                .van-sidebar-item--select::before{
                    background-color:#ff5f16;
                }
            }
        }
        &-right{
            flex:1;
            flex-shrink: 0;
            height:100%;
            overflow: auto;
            
        }
    }
    
}
</style>

